<template>
	<view class="container">
		<view class="myForm">
			<view class="myDivider" />
			<uni-forms ref="valiForm" :rules="rules" v-model="formData" label-position="top" label-width="150">
				<uni-forms-item label="更衣区" required name="lockerLocationId">
					<uni-data-select
						placeholder="请选择"
						:localdata="appStore.areaData"
						v-model="formData.lockerLocationId"
					/>
				</uni-forms-item>
				<uni-forms-item label="更衣柜号" required name="number">
					<uni-easyinput v-model.number="formData.number" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="所属分组" name="lockerGroupId">
					<uni-data-select
						placeholder="请选择"
						:localdata="appStore.groupData.filter(item => item.locationId === formData.lockerLocationId)"
						v-model="formData.lockerGroupId"
					/>
				</uni-forms-item>
			</uni-forms>
			<button class="btn" type="primary" @click="onSubmit('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
import {
	editLocker,
	getLockerDetail,
} from '@/api/locker';
import useAppStore from '@/store/modules/app';
export default {
	components: {
		
	},
	data() {
		return {
			query: {},
			// 表单数据
			formData: {},
			// 规则
			rules: {
				lockerLocationId: {
					rules: [{
						required: true,
						errorMessage: '请选择内容'
					}]
				},
				number: {
					rules: [{
						required: true,
						errorMessage: '请输入内容'
					}]
				},
			},
            // store
            appStore: useAppStore()
		}
	},
    watch: {
        'formData.date': {
            handler(newVal) {
                
            },
            immediate: false,
            deep: true
        },
    },
	onLoad(query) { 
		this.query = query;
		this.initData();
	},
	methods: {
        // 初始数据
        initData() {
			uni.showLoading({ title: '加载中' });
			getLockerDetail(this.query.bathroomLockerId).then(res => {
				this.formData = res.data;
				uni.hideLoading();
			});
        },
		// 提交
		onSubmit(ref) {
			this.$refs[ref].validate().then(res => {
				console.log('success', res);
				// loading提示
				uni.showLoading({ title: '操作中' });
				// 提交接口
				let params = {
					...this.formData,
					...res,
				};
				editLocker(params).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: `提交成功`
					});
					this.onBack();
				});
			}).catch(err => {
				console.log('err', err);
			})
		},
		// 重置表单
		onReset() {
			this.formData = this.$options.data().formData;
		},
        // 跳转页面
        onLocation(url) {
            uni.navigateTo({
                url
            });
        },
	},
}
</script>

<style lang="scss" scoped>
.container {
	min-height: calc(100vh - 148rpx);
	padding: 100rpx 48rpx 48rpx;
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);

	.myDivider {
		width: 60rpx;
		height: 8rpx;
		margin: 0 auto;
		border-radius: 6rpx;
		background-color: #999;
		position: relative;

		&::before {
			content: "";
			width: 16rpx;
			height: 8rpx;
			background: #999;
			border-radius: 50%;
			position: absolute;
			left: -20rpx;
		}

		&::after {
			content: "";
			width: 16rpx;
			height: 8rpx;
			background: #999;
			border-radius: 50%;
			position: absolute;
			right: -20rpx;
		}
	}

	.myForm {
		padding: 24rpx;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 16rpx 2rpx #fff;

		::v-deep .uni-forms-item__label {
			font-weight: bold;
			position: relative;

			&::after {
				// content: ""; 
				width: 100%;
				height: 1rpx;
				background: #000;
				position: absolute;
				left: 14rpx;
				bottom: 20rpx;
			}
		}

		.btn {
			background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
		}

		.myLabel {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.star {
				color: #dd524d;
			}
		}
	}
}
</style>
